import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, Popup, Input,Button } from 'antd-mobile';
import './sqtk.css';
import { RightOutline } from 'antd-mobile-icons';

const Sqtk = () => {
    const navigate = useNavigate();
    const [list, setList] = useState({});
    const [visible1, setVisible1] = useState(false);
    const [selectedReason, setSelectedReason] = useState(''); // 新增状态管理选中的退款原因

    useEffect(() => {
        const imgs = localStorage.getItem('item');
        setList(JSON.parse(imgs));
    }, []);

    const handleReasonChange = (reason) => {
        setSelectedReason(reason); // 更新选中的原因
        setVisible1(false); // 关闭弹框
    };

    const [value, setValue] = useState('')
    const tijiao = () =>{
        navigate('/tmj')
        localStorage.setItem('sqtk', JSON.stringify({...list, refundReason: selectedReason, refundExplain: value }))

    }

    return (
        <div style={{ background: '#f2f2f2', width: "100%", height: "100vh" }}>
            <NavBar onBack={() => navigate(-1)} className='qbfl-nav' style={{ background: '#fff' }}>申请退款</NavBar>
            <div className='xzfw-div'>
                <img src={list.img} alt="" className='wlgz-img' />
                <div>
                    <p className='xzfw-p'>{list.name}</p>
                    <p className='xzfw-p1'>{list.name}</p>
                </div>
            </div>
            <div className='sqtk-div'>
                <p className='sqtk-p'>
                    <span className='sqtk-span'>退款原因</span>
                    <span onClick={() => setVisible1(true)} className='sqtk-span1'>
                        {selectedReason || '请选择'}&nbsp;&nbsp;<RightOutline />
                    </span>
                </p>
                <p className='sqtk-p'>
                    <span className='sqtk-span'>退款说明:</span>
                    <Input
                        placeholder='选填'
                        value={value}
                        onChange={val => {
                            setValue(val)
                        }}
                        style={{ width: '70%' }}
                    />
                </p>
                <p className='sqtk-pp'>
                    <span className='sqtk-span'>退款金额</span>
                    <span style={{color:'red',marginLeft:'0.5rem'}}>￥{list.xprice}</span>
                </p>
            </div>
            <Button block color='danger' size='large' className='sqtk-btn' onClick={tijiao}>提交</Button>
            <Popup
                visible={visible1}
                onMaskClick={() => setVisible1(false)}
                onClose={() => setVisible1(false)}
                bodyStyle={{ height: '40vh' }}
            >
                <div>
                    <h2 className='sqtk-h2'>退款原因</h2>
                    <p className='sqtk-p'>
                        <span className='sqtk-span'>尺码拍错/不喜欢/效果差</span>
                        <input
                            className='sqtk-span1'
                            type="radio"
                            name="reason"
                            value='尺码拍错/不喜欢/效果差'
                            onChange={() => handleReasonChange('尺码拍错/不喜欢/效果差')}
                            checked={selectedReason === '尺码拍错/不喜欢/效果差'}
                        />
                    </p>
                    <p className='sqtk-p'>
                        <span className='sqtk-span'>质量问题</span>
                        <input
                            className='sqtk-span1'
                            type="radio"
                            name="reason"
                            value='质量问题'
                            onChange={() => handleReasonChange('质量问题')}
                            checked={selectedReason === '质量问题'}
                        />
                    </p>
                    <p className='sqtk-p'>
                        <span className='sqtk-span'>材质/面料与商品描述不符</span>
                        <input
                            className='sqtk-span1'
                            type="radio"
                            name="reason"
                            value='材质/面料与商品描述不符'
                            onChange={() => handleReasonChange('材质/面料与商品描述不符')}
                            checked={selectedReason === '材质/面料与商品描述不符'}
                        />
                    </p>
                    <p className='sqtk-p'>
                        <span className='sqtk-span'>大小尺寸与商品描述不符</span>
                        <input
                            className='sqtk-span1'
                            type="radio"
                            name="reason"
                            value='大小尺寸与商品描述不符'
                            onChange={() => handleReasonChange('大小尺寸与商品描述不符')}
                            checked={selectedReason === '大小尺寸与商品描述不符'}
                        />
                    </p>
                    <p className='sqtk-p'>
                        <span className='sqtk-span'>颜色/款式/图案与描述不符</span>
                        <input
                            className='sqtk-span1'
                            type="radio"
                            name="reason"
                            value='颜色/款式/图案与描述不符'
                            onChange={() => handleReasonChange('颜色/款式/图案与描述不符')}
                            checked={selectedReason === '颜色/款式/图案与描述不符'}
                        />
                    </p>
                </div>
            </Popup>
        </div>
    );
};

export default Sqtk;